<template>
  <nut-popup :close-on-click-overlay="false" :style="{width:'80%', padding: '30px 6px',borderRadius:'8px' }" v-model:visible="show">
    <h3 class="text-center pb-12">选择护照签发地</h3>
    <div class="flex  flex-wrap province-container px-20">
      <div v-for="(item,index) in provinceList" :key="index" class="rounded-4 border border-#eee border-solid country px-6 pt-6 pb-8 mb-6 text-center bg-[#f6f7f9]" :class="[selectedProvince==item.value ?'active':'']" @click="goSelectProvince(item,index)">
        <p>{{ item.value }}</p>
      </div>
    </div>
  </nut-popup>
</template>
<script setup>
import { defineProps } from 'vue'
import { RectRight } from '@nutui/icons-vue';
import { useRoute, useRouter } from 'vue-router'
import { defineEmits, defineExpose } from 'vue'
import { useUserStore } from '@/store/modules/user/index.js'
import { setVisaProvince } from '@/utils/storage/common.js'

const emit = defineEmits(['confirmSelectVisa', 'update:selectedProvince'])

const router = useRouter()
defineProps({
  provinceList: {
    type: Array
  },
  selectedProvince: {
    type: [Number, String],
    default: '北京'
  }
})

let show = ref(false)
const open = () => {
  show.value = true
}
const goSelectProvince = (item, index) => {
  show.value = false
  setVisaProvince({ key: item.key, value: item.value })
  emit('update:selectedProvince', item.value)
  emit('confirmSelectVisa', item)
}
defineExpose({ open })
</script>

<style lang="scss" scoped>
.country {
  flex: 0 0 32%;
  margin-right: 2%;
  border: 2px solid transparent;
}
.country:nth-child(3n) {
  margin-right: 0;
}
.country.active {
  background-color: #fff3bf;
  border: 2px solid #f6d742;
}
.province-container {
  height: 400px;
  overflow: auto;
}
</style>